<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>余额交易查询</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="小镖人、社区、网络货运">
    <meta name="description" content="小镖人、社区、网络货运">
    <link rel="stylesheet" href="../../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .input-container {
            display: flex;
        }

        .input-container input {
            flex: 1;
            margin-right: 0px;
        }

        tr td:nth-child(1),
        tr td:nth-child(3) {
            background-color: #E8EAED; /* 设置背景颜色 */
        }

        .span-text-qry {
            color: #156FB2;
            font-size: 15px;
        }
    </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="form-initPlat" id="userForm" method="post"
          style="margin-bottom: 80px">
        <div class="input-container">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" id="acntNoInput" name="acntNo" placeholder="请输入单位账号"
                           class="layui-input">
                </div>
                <button class="layui-btn layui-btn-primary layui-border-blue" lay-submit="" lay-filter="add-initPlat">
                    添加
                </button>
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="post-initPlat">查询</button>
                <span id="clear" style="color: red;font-size: 12px;margin:0px 15px">清空</span>
                <span style="color: #8D8D8D;font-size: 10px;">注意：查询条件等于查询输入框的值加查询条件的值</span>
            </div>
        </div>
        <div id="contentDiv">
            <span>查询条件：</span>
        </div>
        <table id="tabel" lay-filter="test"></table>
    </form>
</div>


<script src="../../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    layui.extend({
        admin: '/platform/xbr_layui_extend/admin' //集成路径
    }).use(["admin", 'laydate', 'table', 'form'], function () {
        const $ = layui.$, form = layui.form, admin = layui.admin, element = layui.element, laydate = layui.laydate,
            layer = layui.layer,
            table = layui.table;
        element.render('icon');
        // 初始化时间范围选择器
        laydate.render({
            elem: '#dateRange',
            range: true,
            format: 'yyyy/MM/dd' // 使用斜杠作为时间分隔符
        });
        let quryBtnText = [];
        dataPage([])

        //上传完毕 提交表单
        form.on('submit(add-initPlat)', function (data) {
            const acntNo = data.field.acntNo;
            if (acntNo == null || acntNo === "") {
                layer.msg("请输入查询账号");
                return false;
            }
            if (!quryBtnText.includes(acntNo)) {
                quryBtnText.push(acntNo);
                addContent();
            } else {
                layer.msg("该查询条件已经存在")
            }
            $("#clear").click(function () {  //清空
                quryBtnText = []
                const contentDiv = document.getElementById('contentDiv');
                contentDiv.removeChild(contentDiv.lastElementChild);
            });

            // 获取输入框元素
            const inputElement = document.getElementById('acntNoInput');
            inputElement.value = '';
            return false;
        });

        // 使用 JavaScript 动态添加内容和 i 标签
        function addContent() {
            const contentDiv = document.getElementById('contentDiv');
            // 获取第一个子元素
            const firstChild = contentDiv.firstElementChild;
            while (contentDiv.lastElementChild !== firstChild) {
                contentDiv.removeChild(contentDiv.lastElementChild);
            }
            // 使用 JavaScript 循环添加 <span> 标签
            for (let i = 0; i < quryBtnText.push(); i++) {
                const spanText = quryBtnText[i];
                const span = document.createElement('span');
                span.className = 'span-text-qry';
                span.textContent = spanText;
                span.style.marginLeft = "15px";
                const iTag = document.createElement('i');
                iTag.className = 'layui-icon layui-icon-close';
                iTag.style.color = 'red';
                iTag.onclick = function () {
                    contentDiv.removeChild(span);
                    // 删除对应的 quryBtnText 元素
                    quryBtnText.splice(i, 1);
                };
                span.appendChild(iTag);
                contentDiv.appendChild(span);
            }
        }

        // 页面加载时调用添加内容的函数
        addContent();
        function dataPage(dataPages) {
            table.render({
                elem: '#tabel'
                , height: 312
                , data: dataPages
                , page: true //开启分页
                , limits: [10, 20, 50, 100, 200]
                , cols: [[ //表头
                     {field: 'acntNo', title: '账号', width: 120}
                    , {field: 'acntName', title: '名称', width: 120}
                    , {field: 'acctBal', title: '账户余额', width: 120}
                    , {field: 'avlBal', title: '账户可用余额', width: 120}
                    , {field: 'frzBal', title: '账户冻结余额', width: 120}
                    , {field: 'state', title: '查询状态', width: 120, templet: function(d) {return getLoanFlags(d);}}
                    , {field: 'errCode', title: '错误代码', width: 120}
                    , {field: 'errMsg', title: '错误描述', width: 120}
                ]]
            });
        }
        function getLoanFlags(d){
            if(d==null||d==="")return "无数据";
            if(String(d.state)==="0"){
                return "失败"
            }else if(String(d.state)==="1"){
                return "成功"
            }else{
                return d.state
            }
        }
        form.render(null, 'form-initPlat');
        form.on('submit(post-initPlat)', function (data) {
            const acntNo = data.field.acntNo;
            if (acntNo != null && acntNo !== "") quryBtnText.push(acntNo);
            if (quryBtnText.length < 1) {
                layer.msg("请输入查询账号");
                return false;
            }
            addContent();
            const inputElement = document.getElementById('acntNoInput');
            inputElement.value = '';
            admin.req({
                url: "/platform/cmbc/getQryBalNew",
                data:{acntNos: quryBtnText.join(",")},
                type: 'post',
                done: function (res) {
                    const data = res.data;
                    const array = [];
                    for (let key in data['balList']) {
                        if (data['balList'].hasOwnProperty(key)) {
                            array.push( data['balList'][key]);
                        }
                    }
                    dataPage(array)
                }
            });
            return false;
        });

    });
</script>
</body>
</html>